<template>
  <div class="page has-navbar" v-nav="{ title: '优惠券', showBackButton: true, onBackButtonClick: back,showMenuButton: true,onMenuButtonClick: menu }">
    <div class="page-content text-center">
      <div class="couponsGroup">
        <div class="coupons" v-for="(c , index) in coupons" :key="index">
          <div class="left">
            <p class="price">{{c.price}}</p>
            <p class="lijian">满{{c.fill}}立减</p>
          </div>
          <div class="mid">
            <div>
              <h4>{{c.title}}</h4>
              <p>使用条件：{{c.condition}}</p>
              <p>有效期至：{{c.date}}</p>
            </div>
          </div>
          <div class="right">
            立即使用
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Coupons",
      data(){
        return{
          coupons : [
            {
              title : '全品优惠券',
              price : '￥10',
              fill : '168',
              condition : '仅限首单使用',
              date : '无限制'
            },
            {
              title : '全品优惠券',
              price : '￥20',
              fill : '268',
              condition : '仅限首单使用',
              date : '无限制'
            },
            {
              title : '全品优惠券',
              price : '￥30',
              fill : '368',
              condition : '仅限首单使用',
              date : '无限制'
            },
            {
              title : '全品优惠券',
              price : '￥40',
              fill : '468',
              condition : '仅限首单使用',
              date : '无限制'
            },
            {
              title : '全品优惠券',
              price : '￥50',
              fill : '568',
              condition : '仅限首单使用',
              date : '无限制'
            },
            {
              title : '全品优惠券',
              price : '￥60',
              fill : '668',
              condition : '仅限首单使用',
              date : '无限制'
            },
            {
              title : '全品优惠券',
              price : '￥70',
              fill : '768',
              condition : '仅限首单使用',
              date : '无限制'
            },
            {
              title : '全品优惠券',
              price : '￥80',
              fill : '868',
              condition : '仅限首单使用',
              date : '无限制'
            },
          ]
        }
      },
      methods : {
        back(){
          this.$router.back('/')
        },
        menu(){

        }
      }
    }
</script>

<style scoped lang="less">
  .couponsGroup{
    margin: 0 15px;
    .coupons{
      width: 100%;
      height: 100px;
      margin: 15px 0;
      position: relative;
      display: flex;
      justify-content: space-between;
      text-align: start;
      @leftLen : 30%;
      &::before,
      &::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 50%;
        top: 0;
        left: 0;
        background: #ffffff;
        background: radial-gradient(circle at @leftLen 0px, transparent 8px, #ffffff 9px)left top;
        background-repeat: no-repeat;
      }
      &::after{
        top: 50%;
        right: 0;
        background: radial-gradient(circle at @leftLen 100%, transparent 8px, #ffffff 9px)left top;
      };
      .left,.mid,.right{
        z-index: 1;
      }
      .left{
        width: 30%;
        padding: 5px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #ed8f03;
        position: relative;
        text-align: center;
        &::before{
          content: '';
          position: absolute;
          border-right: 1px dashed #cccccc;
          width: 1px;
          height: 65%;
          right: 0;
        }
        .price{
          font-size: 30px;
        }
        p.lijian{
          font-size: 12px;
          line-height: 12px;
          text-align: center;
        }
      }
      .mid{
        width: 50%;
        padding: 5px 20px;
        p{
          font-size: 12px;
          line-height: 12px;
          color: #666666;
        }
      }
      .right{
        overflow: hidden;
        font-size: 18px;
        width: 60px;
        padding: 8px 18px;
        text-align: center;
        border-left: 1px dashed #ccc;
        color: #ed8f03;
      }
    }
  }
</style>
